<template>
	<char-base @change="change" :options="chartOptions" class="chartline"></char-base>
</template>

<script>
	import charBase from '../chart/chart-base'
	import { getColorList,getxAxis,getSeriesStyle,getChartGrid } from '../chart/chart-config'
	export default {
		name: 'wioc-chart-bar',
		components: {
			charBase
		},
		props:["componentParams"],
		data() {
			return {
				chartOrigin:{
					columns: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					list:[{
						"name":"线上办理",
						"data":[120, 132, 101, 134, 190, 230, 210, 220, 182, 191, 234, 290]
					},{
						"name":"行政服务中心",
						"data":[220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 190]
					},{
						"name":"13个街道镇社区",
						"data":[320, 332, 301, 190, 330, 410, 290, 330, 310, 334, 390, 330],
					}]
				},
				chartOptions:{}
			}
		},
		watch:{
			"dynamicDataResult": {
				handler() {
					this.setChartOptions(this.dynamicDataResult.data)
				},
				deep: true,
			},
			"componentParams": {
				handler(val) {
					this.getDynamicData()
				},
				deep: true,
			}
		},
		mounted(){
			this.setChartOptions(this.chartOrigin)
		},
		methods:{
			change(params){
				this.$emit("change",params)
			},
			setChartOptions(renderData) {
				let colorList = getColorList()
				let legendData = [];
				let tempSeries = [];
				let doubleY = false;
				let xAxis = getxAxis(renderData.columns)
				renderData.list.forEach((item,index)=>{
					legendData.push(item.name)
					tempSeries.push(getSeriesStyle(item.type ? item.type : "bar",item,index))
					if(item.yAxisIndex){
						doubleY = true
					}
				})
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#64a5e5',
							}
						},
						textStyle: {
							fontSize: 24,
						},
					},
					legend: {
						show: true,
						x: 'center',
						y: '10',
						icon: 'stack',
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: '#fff',
							fontSize: 24,
						},
						data: legendData
					},
					grid: getChartGrid(),
					xAxis: xAxis,
					yAxis: [{
						nameTextStyle: {
							color: "#00c7ff",
							fontSize: 20
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#00c7ff',
								width: this.lineWidth,
								type: "solid"
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								color: "#758897",
								fontSize: 24
							}
						},
						splitLine: {
							lineStyle: {
								color: '#346690'
							}
						}
					}],
					series: tempSeries
				};
				//  双 y 轴
				if(doubleY){
					option.yAxis.push(option.yAxis[0])
				}
				this.chartOptions = option
			},

		}
	}
</script>
<style lang="less" scoped="scoped">
	.chartline {
        width: 100%;
		height: 524px;
	}
</style>
